<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>如何理解HTML5语义化？</h2>
  <p>HTML5 语义化是指通过使用具有明确含义的标签，使网页的结构和内容更加清晰，方便浏览器、开发者以及搜索引擎理解网页内容。</p>
  <h3>它有以下的好处</h3>
  <p>
    1.提高代码可读性：开发者无需额外注释即可理解代码结构。<br>
    2.增强 SEO（搜索引擎优化）：搜索引擎能更好地抓取和理解网页内容。<br>
    3.提升可访问性：辅助技术（如屏幕阅读器）可以更准确地解释页面内容。<br>
    4.支持更好的浏览器兼容性：现代浏览器能够更高效地渲染语义化结构。
  </p>
  <!-- header标签本身并没有什么特定的属性，它通过语义化标记帮助浏览器和搜索引擎更好地理解页面结构 -->
  <header>
    <h1>面试派</h1>
    <!-- nav 标签 同上 -->
    <nav>
      <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#about">关于</a></li>
        <li><a href="#contact">联系</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <!-- 标签明确表示这部分内容是一个独立的章节或部分，有助于提高HTML文档的语义化程度，使代码更易于理解和维护。 -->
    <section id="home">
      <h2>欢迎访问</h2>
      <p>这是一个 HTML5 语义化的示例。</p>
    </section>
    <section id="about">
      <h2>关于我们</h2>
      <!-- article标签明确表示这部分内容是一个独立的、完整的单元，有助于提高HTML文档的语义化程度，使代码更易于理解和维护。 -->
      <article>
        <h3>我们的历史</h3>
        <p>这是关于我们历史的介绍。</p>
      </article>
    </section>
  </main>
  <!-- <aside>
    标签是HTML5中引入的一个语义化标签，用于表示文档中与主要内容相关但又独立的内容块。
    它通常用于侧边栏、注释、引用、广告等场景，
    这些内容虽然与页面的主要内容相关，但不是主要内容的核心部分。 -->
  <aside>
    <h3>相关文章</h3>
    <ul>
      <li><a href="#">文章 1</a></li>
      <li><a href="#">文章 2</a></li>
    </ul>
  </aside>
  <footer>
    我是底部
  </footer>
</body>
</html>